<template>
    <header>
        <img src="../assets/logo.jpg" alt="LOGO">
        <div id="header_right">
            <div class="searchBox">
                <input type="text" placeholder="搜索电视应用">
                <div class="button"></div>
            </div>
            <div class="header_right2">
                <a href="">登录</a> <span>丨</span><a href="">注册</a>
            </div>
        </div>
    </header>
</template>

<script>
export default {

}
</script>

<style>
    header{
        height: 40px;
        overflow: hidden;
        position: relative;
    }
    header img{
        height: 100%;
        float: left;
        margin-left: 50px;
    }
    #header_right{
        float: right;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
    }
    #header_right .searchBox{
        float: left;
        overflow: hidden;
    }
    #header_right .searchBox input{
        border: gray 1px solid;
        text-indent: 1em;
        width: 140px;
        height: 20px;
        float: left;
        margin-right: 5px;
        font-size: 13px;
        
    }
    #header_right .searchBox .button{
        height: 22px;
        width: 30px;
        float: left;
        background: #fc8302 url(../assets/search.png) no-repeat center center; 
        background-size:20px;
        border:none;
    }
    .header_right2{
        float: left;
        font-size: 12px;
        padding-top: 5px;
        margin-left: 20px;
    }
    .header_right2 a{
        text-decoration: none;
        color: gray;
    }
</style>